<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>测评详情 - 教师测评系统</title>
  <!-- Bootstrap 5 CSS -->
  <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
  <!-- Bootstrap Icons -->
  <link th:href="@{/static/css/bootstrap-icons.css}" rel="stylesheet">

  <style>
    :root {
      --primary-color: #3f6ad8;
      --primary-light: rgba(63, 106, 216, 0.1);
      --primary-dark: #2952bb;
      --primary-gradient: linear-gradient(135deg, #3f6ad8 0%, #2952bb 100%);
      --secondary-color: #6c757d;
      --success-color: #2dce89;
      --success-light: rgba(45, 206, 137, 0.1);
      --warning-color: #fb6340;
      --warning-light: rgba(251, 99, 64, 0.1);
      --danger-color: #f5365c;
      --light-color: #f8f9fe;
      --dark-color: #344767;
      --text-muted: #8a94a6;
      --border-radius: 16px;
      --card-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
      --hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

    body {
      font-family: 'Noto Sans SC', 'Poppins', sans-serif;
      background-color: var(--light-color);
      background-image:
        radial-gradient(circle at 5% 10%, rgba(63, 106, 216, 0.05) 0%, transparent 15%),
        radial-gradient(circle at 95% 90%, rgba(63, 106, 216, 0.05) 0%, transparent 15%);
      padding-bottom: 80px; /* 为底部导航栏预留空间 */
      color: var(--dark-color);
      min-height: 100vh;
    }

    /* 导航栏 */
    .nav-bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 66px;
      background-color: #fff;
      box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.07);
      display: flex;
      z-index: 1000;
      border-radius: 24px 24px 0 0;
      padding: 0 10px;
    }

    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      text-decoration: none;
      font-size: 12px;
      line-height: 1;
      transition: all 0.3s ease;
      position: relative;
      font-weight: 500;
      padding: 12px 0;
    }

    .nav-item.active {
      color: var(--primary-color);
    }

    .nav-item.active:after {
      content: '';
      position: absolute;
      bottom: 8px;
      width: 24px;
      height: 3px;
      background-color: var(--primary-color);
      border-radius: 3px;
    }

    .nav-icon {
      font-size: 24px;
      margin-bottom: 5px;
    }

    /* 页面容器 */
    .page-container {
      padding-top: 30px;
      padding-bottom: 30px;
      max-width: 540px;
      margin: 0 auto;
      position: relative;
    }

    /* 卡片样式 */
    .card {
      border-radius: var(--border-radius);
      box-shadow: var(--card-shadow);
      margin-bottom: 24px;
      border: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
      background-color: #fff;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: var(--hover-shadow);
    }

    .card-body {
      padding: 24px;
    }

    /* 返回按钮 */
    .back-button {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 100;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      color: var(--primary-color);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      border: none;
      transition: all 0.2s;
      font-size: 18px;
    }

    .back-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 18px rgba(63, 106, 216, 0.15);
      background-color: var(--primary-light);
      color: var(--primary-dark);
    }

    /* 教师信息卡片 */
    .evaluation-header {
      background: #fff;
      border-radius: var(--border-radius);
      padding: 28px 24px;
      margin-bottom: 28px;
      position: relative;
      border-left: 4px solid var(--primary-color);
      box-shadow: var(--card-shadow);
      overflow: hidden;
    }

    .evaluation-header::before {
      content: '';
      position: absolute;
      top: -30px;
      right: -30px;
      width: 120px;
      height: 120px;
      background-color: var(--primary-light);
      border-radius: 50%;
      opacity: 0.6;
      z-index: 0;
    }

    .teacher-avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: var(--primary-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      box-shadow: 0 5px 15px rgba(63, 106, 216, 0.2);
      position: relative;
      z-index: 1;
    }

    .teacher-avatar i {
      font-size: 32px;
      color: #fff;
    }

    .status-badge {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 7px 15px;
      border-radius: 30px;
      font-weight: 500;
      font-size: 13px;
      z-index: 2;
    }

    .badge-completed {
      background-color: var(--success-light);
      color: var(--success-color);
    }

    .badge-pending {
      background-color: var(--warning-light);
      color: var(--warning-color);
    }

    .teacher-meta {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      font-size: 14px;
      color: var(--text-muted);
      position: relative;
      z-index: 1;
    }

    .teacher-meta i {
      margin-right: 12px;
      font-size: 16px;
      min-width: 18px;
      text-align: center;
      color: var(--primary-color);
    }

    /* 类别标题 */
    .category-title {
      font-size: 17px;
      font-weight: 600;
      padding: 12px 0;
      margin-top: 28px;
      margin-bottom: 20px;
      color: var(--dark-color);
      position: relative;
      padding-left: 18px;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .category-title:before {
      content: '';
      position: absolute;
      left: 0;
      width: 4px;
      height: 18px;
      background-color: var(--primary-color);
      border-radius: 2px;
    }

    /* 评测项目卡片 */
    .item-card {
      border-radius: var(--border-radius);
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(230, 235, 250, 0.8);
      margin-bottom: 22px;
      overflow: hidden;
      transition: all 0.3s ease;
      background-color: #fff;
    }

    .item-card:hover {
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      transform: translateY(-3px);
    }

    .item-header {
      padding: 18px 20px;
      background-color: rgba(248, 249, 254, 0.7);
      border-bottom: 1px solid rgba(230, 235, 250, 0.8);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .item-title {
      font-weight: 500;
      color: var(--dark-color);
      margin: 0;
      font-size: 16px;
    }

    .item-body {
      padding: 22px 20px;
    }

    .item-desc {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 18px;
      padding: 15px;
      background-color: rgba(248, 249, 254, 0.5);
      border-radius: 10px;
      border-left: 3px solid var(--primary-color);
    }

    /* 评分选择 */
    .score-select {
      width: 90px;
      border-radius: 10px;
      border: 2px solid #e9ecef;
      padding: 8px 12px;
      font-weight: 500;
      transition: all 0.3s;
      background-color: white;
    }

    .score-select:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.25rem rgba(63, 106, 216, 0.12);
    }

    .score-display {
      font-size: 22px;
      font-weight: 600;
      color: var(--success-color);
    }

    /* 评语框 */
    .form-floating > textarea {
      border-radius: 12px;
      border: 2px solid #e9ecef;
      padding: 15px;
      height: 100px !important;
      transition: all 0.3s;
      resize: none;
    }

    .form-floating > textarea:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.25rem rgba(63, 106, 216, 0.12);
    }

    .form-floating > label {
      padding: 15px;
      color: var(--text-muted);
    }

    /* 提交按钮区域 */
    .sticky-bottom {
      position: sticky;
      bottom: 80px;
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      padding: 20px;
      box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.07);
      margin: 30px -15px -15px;
      z-index: 999;
      border-radius: 0 0 var(--border-radius) var(--border-radius);
      transition: all 0.3s ease;
    }

    .btn-submit {
      border-radius: 12px;
      font-weight: 600;
      padding: 14px;
      background: var(--primary-gradient);
      border: none;
      box-shadow: 0 6px 18px rgba(63, 106, 216, 0.2);
      transition: all 0.3s;
      font-size: 16px;
      position: relative;
      overflow: hidden;
    }

    .btn-submit:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: all 0.6s;
    }

    .btn-submit:hover {
      box-shadow: 0 8px 25px rgba(63, 106, 216, 0.25);
      transform: translateY(-3px);
    }

    .btn-submit:hover:before {
      left: 100%;
    }

    .loading-container {
      padding: 60px 0;
      text-align: center;
    }

    .spinner-border {
      width: 3rem;
      height: 3rem;
      color: var(--primary-color);
    }

    /* 自定义评分选择器 */
    .score-buttons {
      display: flex;
      gap: 10px;
      margin: 15px 0;
    }

    .score-btn {
      flex: 1;
      border-radius: 10px;
      padding: 10px 8px;
      text-align: center;
      cursor: pointer;
      font-weight: 500;
      border: 2px solid #e9ecef;
      color: var(--text-muted);
      background-color: white;
      transition: all 0.2s;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    }

    .score-btn:hover {
      background-color: rgba(248, 249, 254, 0.8);
      transform: translateY(-2px);
    }

    .score-btn.active {
      background-color: var(--primary-light);
      border-color: var(--primary-color);
      color: var(--primary-color);
      box-shadow: 0 4px 10px rgba(63, 106, 216, 0.15);
    }

    /* 周期信息横幅 */
    .period-info {
      display: none; /* 隐藏，因为已在教师信息卡片中显示 */
    }

    /* 错误提示 */
    .alert-error {
      border-radius: var(--border-radius);
      display: flex;
      align-items: center;
      padding: 25px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
      border: none;
    }

    /* 动画效果 */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fadeInUp {
      animation: fadeInUp 0.6s ease forwards;
    }

  </style>
</head>
<body>
<div class="container page-container">
  <a href="/h5/index" class="back-button">
    <i class="bi bi-arrow-left"></i>
  </a>

  <!-- 任务详情 -->
  <div id="taskDetail">
    <div class="loading-container">
      <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <p class="text-muted mt-4">数据加载中，请稍候...</p>
    </div>
  </div>

  <!-- 评测表单 -->
  <div id="assessmentForm" style="display: none;">
    <div class="evaluation-header fadeInUp" style="animation-delay: 0.1s">
      <span id="statusBadge" class="badge status-badge"></span>

      <div class="d-flex flex-column mb-4">
        <div class="teacher-avatar">
          <i class="bi bi-person-badge"></i>
        </div>
        <h5 id="teacherName" class="mb-3 fw-bold">教师姓名</h5>
      </div>

      <div class="teacher-meta">
        <i class="bi bi-building"></i>
        <span id="teacherDepartment">教师部门</span>
      </div>
      <div class="teacher-meta">
        <i class="bi bi-briefcase"></i>
        <span id="teacherPosition">教师职位</span>
      </div>
      <div class="teacher-meta">
        <i class="bi bi-calendar-check"></i>
        <span id="periodName">评测周期</span>
      </div>
    </div>

    <div id="itemsContainer" class="fadeInUp" style="animation-delay: 0.2s">
      <!-- 评测项目将在这里动态生成 -->
    </div>

    <div class="sticky-bottom fadeInUp" style="animation-delay: 0.3s">
      <button id="submitBtn" class="btn btn-primary w-100 btn-submit" type="button">
        <i class="bi bi-check-circle me-2"></i>提交评测
      </button>
    </div>
  </div>
</div>

<!-- 底部导航栏 -->
<div class="nav-bottom">
  <a href="/h5/index" class="nav-item active">
    <div class="nav-icon">
      <i class="bi bi-house-door-fill"></i>
    </div>
    <div>首页</div>
  </a>
  <a href="/h5/my" class="nav-item">
    <div class="nav-icon">
      <i class="bi bi-person"></i>
    </div>
    <div>我的</div>
  </a>
</div>

<!-- jQuery -->
<script th:src="@{/static/js/jquery-3.6.0.min.js}"></script>
<!-- Bootstrap JS -->
<script th:src="@{/static/js/bootstrap.bundle.min.js}"></script>

<script th:inline="javascript">
    $(document).ready(function() {
      const relationId = /*[[${relationId}]]*/'0';
      loadTaskDetail(relationId);

      // 加载任务详情
      function loadTaskDetail(relationId) {
        $.ajax({
          url: '/api/assessment/task/' + relationId,
          method: 'GET',
          headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('token')
          },
          success: function(resp) {
            if (resp.code === 200) {
              renderTaskDetail(resp.data);
            } else {
              showError(resp.message);
            }
          },
          error: function() {
            showError('获取任务详情失败，请稍后再试');
          }
        });
      }

      // 渲染任务详情
      function renderTaskDetail(task) {
        $('#taskDetail').hide();
        $('#assessmentForm').show();

        // 设置教师信息
        $('#teacherName').text(task.assesseeName);
        $('#teacherDepartment').text(task.assesseeDepartment || '未分配部门');
        $('#teacherPosition').text(task.assesseePosition || '未分配职位');
        $('#periodName').text(task.periodName);

        // 设置状态标签
        const statusBadge = $('#statusBadge');
        if (task.assessStatus === 1) {
          statusBadge.addClass('badge-completed').text('已完成');
          $('#submitBtn').hide();
        } else {
          statusBadge.addClass('badge-pending').text('待评测');
        }

        // 按类别分组项目
        const itemsByCategory = {};
        task.items.forEach(item => {
          const categoryId = item.categoryId || 0;
          const categoryName = item.categoryName || '未分类';

          if (!itemsByCategory[categoryId]) {
            itemsByCategory[categoryId] = {
              name: categoryName,
              items: []
            };
          }

          itemsByCategory[categoryId].items.push(item);
        });

        // 渲染评测项目
        let html = '';
        Object.values(itemsByCategory).forEach((category, categoryIndex) => {
          html += `<div class="category-title" style="animation-delay: ${0.3 + (categoryIndex * 0.1)}s">${category.name}</div>`;

          category.items.forEach((item, itemIndex) => {
            const isReadOnly = task.assessStatus === 1;
            const itemScore = item.score !== null ? item.score : '';
            const animationDelay = 0.3 + (categoryIndex * 0.1) + ((itemIndex + 1) * 0.05);

            html += `
              <div class="item-card" data-item-id="${item.itemId}" style="animation-delay: ${animationDelay}s">
                <div class="item-header">
                  <h6 class="item-title">${item.itemName}</h6>
                  <div>
                    ${isReadOnly
                      ? `<span class="score-display">${itemScore}</span> <small class="text-muted">分</small>`
                      : ``
                    }
                  </div>
                </div>
                <div class="item-body">
                  ${item.description ? `<div class="item-desc">${item.description}</div>` : ''}

                  ${!isReadOnly ? `
                    <div class="score-buttons">
                      <div class="score-btn ${itemScore === 1 ? 'active' : ''}" data-score="1" data-item-id="${item.itemId}">1分</div>
                      <div class="score-btn ${itemScore === 2 ? 'active' : ''}" data-score="2" data-item-id="${item.itemId}">2分</div>
                      <div class="score-btn ${itemScore === 3 ? 'active' : ''}" data-score="3" data-item-id="${item.itemId}">3分</div>
                      <div class="score-btn ${itemScore === 4 ? 'active' : ''}" data-score="4" data-item-id="${item.itemId}">4分</div>
                      <div class="score-btn ${itemScore === 5 ? 'active' : ''}" data-score="5" data-item-id="${item.itemId}">5分</div>
                    </div>
                  ` : ''}

                  ${isReadOnly && item.comments ? `
                    <div class="comment-display mt-3 p-3 rounded-3" style="background-color: rgba(248, 249, 254, 0.5); border-left: 3px solid var(--success-color);">
                      <div class="small text-muted mb-1">评语：</div>
                      <div>${item.comments}</div>
                    </div>
                  ` : ''}

                  ${!isReadOnly ? `
                    <div class="mt-3">
                      <textarea class="form-control rounded-3 border-2"
                                placeholder="评语（选填）"
                                id="comments-${item.itemId}"
                                style="height: 80px; padding: 12px; resize: none;">${item.comments || ''}</textarea>
                    </div>
                  ` : ''}
                </div>
              </div>
            `;
          });
        });

        $('#itemsContainer').html(html);

        // 添加动画类
        setTimeout(function() {
          $('.category-title, .item-card').addClass('fadeInUp');
        }, 100);

        // 评分按钮事件
        $('.score-btn').click(function() {
          const itemId = $(this).data('item-id');
          const score = $(this).data('score');

          // 更新按钮样式
          $(`.score-btn[data-item-id="${itemId}"]`).removeClass('active');
          $(this).addClass('active');
        });

        // 提交评测的事件监听
        $('#submitBtn').click(function() {
          submitAssessment(task);
        });
      }

      // 提交评测
      function submitAssessment(task) {
        // 收集所有评分项
        const itemScores = [];
        let hasError = false;

        // 遍历所有评测项目卡片
        $('.item-card').each(function() {
          const itemId = $(this).data('item-id');
          const activeBtn = $(this).find('.score-btn.active');
          const score = activeBtn.length ? activeBtn.data('score') : null;
          const comments = $(`#comments-${itemId}`).val();

          if (!score) {
            hasError = true;
            // 高亮显示未评分的项目
            $(this).addClass('border-danger');
            // 添加视觉反馈
            $('html, body').animate({
              scrollTop: $(this).offset().top - 100
            }, 500);
            return false;
          }

          itemScores.push({
            itemId: itemId,
            score: score,
            comments: comments
          });
        });

        if (hasError) {
          // 使用更友好的提示
          const toastHtml = `
            <div class="position-fixed top-50 start-50 translate-middle p-3 bg-danger text-white rounded-3 shadow" style="z-index: 1100; min-width: 280px; max-width: 90%;">
              <div class="d-flex align-items-center">
                <i class="bi bi-exclamation-circle-fill me-3 fs-5"></i>
                <div class="flex-grow-1">请为所有评测项目评分</div>
              </div>
            </div>
          `;

          $(toastHtml).appendTo('body').delay(2000).fadeOut(500, function() {
            $(this).remove();
          });
          return;
        }

        // 显示加载中反馈
        $('#submitBtn').prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>提交中...');

        // 提交评测
        $.ajax({
          url: '/api/assessment/submit',
          method: 'POST',
          headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('token'),
            'Content-Type': 'application/json'
          },
          data: JSON.stringify({
            relationId: task.relationId,
            itemScores: itemScores
          }),
          success: function(resp) {
            if (resp.code === 200) {
              // 成功提示
              const successToast = `
                <div class="position-fixed top-50 start-50 translate-middle p-4 bg-success text-white rounded-3 shadow" style="z-index: 1100;">
                  <div class="d-flex align-items-center">
                    <i class="bi bi-check-circle-fill me-3 fs-4"></i>
                    <div>
                      <div class="fw-bold mb-1">操作成功</div>
                      <div>评测已提交，感谢您的参与！</div>
                    </div>
                  </div>
                </div>
              `;

              $(successToast).appendTo('body');

              // 延迟跳转
              setTimeout(function() {
                window.location.href = '/h5/index';
              }, 1500);
            } else {
              $('#submitBtn').prop('disabled', false).html('<i class="bi bi-check-circle me-2"></i>提交评测');

              // 显示错误提示
              const errorToast = `
                <div class="position-fixed top-50 start-50 translate-middle p-3 bg-danger text-white rounded-3 shadow" style="z-index: 1100; min-width: 300px; max-width: 90%;">
                  <div class="d-flex align-items-center">
                    <i class="bi bi-exclamation-circle-fill me-3 fs-5"></i>
                    <div class="flex-grow-1">评测提交失败：${resp.message}</div>
                  </div>
                </div>
              `;

              $(errorToast).appendTo('body').delay(3000).fadeOut(500, function() {
                $(this).remove();
              });
            }
          },
          error: function() {
            $('#submitBtn').prop('disabled', false).html('<i class="bi bi-check-circle me-2"></i>提交评测');

            // 显示错误提示
            const errorToast = `
              <div class="position-fixed top-50 start-50 translate-middle p-3 bg-danger text-white rounded-3 shadow" style="z-index: 1100; min-width: 300px; max-width: 90%;">
                <div class="d-flex align-items-center">
                  <i class="bi bi-exclamation-circle-fill me-3 fs-5"></i>
                  <div class="flex-grow-1">网络错误，请稍后再试</div>
                </div>
              </div>
            `;

            $(errorToast).appendTo('body').delay(3000).fadeOut(500, function() {
              $(this).remove();
            });
          }
        });
      }

      // 显示错误信息
      function showError(message) {
        $('#taskDetail').html(`
          <div class="alert alert-danger alert-error" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-3 fs-4"></i>
            <div>
              <div class="fw-bold mb-2">加载失败</div>
              <div>${message}</div>
            </div>
          </div>
          <div class="text-center mt-4">
            <a href="/h5/index" class="btn btn-outline-primary rounded-pill px-4 py-2">
              <i class="bi bi-arrow-left me-2"></i> 返回首页
            </a>
          </div>
        `);
      }
    });

</script>
</body>
</html>
